<nz-card [nzBordered]="false">
    <form nz-form [nzLayout]="'inline'" class="search__form">
        <nz-form-item>
            <nz-form-control>
                <permission-combo [multiple]="false" [dropDownStyle]="{'max-height':'300px'}" [(selectedPermission)]="selectedPermission"
                    (selectedPermissionChange)="refresh()">
                </permission-combo>
            </nz-form-control>
        </nz-form-item>
    </form>
    <button nz-button [nzType]="'primary'" *ngIf="isGranted('Pages.Administration.Roles.Create')" (click)="createOrEdit()">
        <i nz-icon type="plus"></i>
        <span>
            {{"CreateNewRole" | localize}}
        </span>
    </button>
    <ng-container *ngIf="selectedDataItems.length > 0">
        <button nz-button [nzType]="'danger'" *ngIf="isGranted('Pages.Administration.Roles.Delete')" (click)="batchDelete()">
            <i nz-icon type="delete"></i>
            <span>
                删除所选
            </span>
        </button>
    </ng-container>
    <div class="my-md">
        <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
            <ng-template #message>
                <span>
                    已选择<strong class="text-primary">{{selectedDataItems.length}}</strong> 项
                </span>
                <a (click)="restCheckStatus(dataList)" *ngIf="selectedDataItems.length>0" class="ml-md">
                    {{'Clear' | localize}}
                </a>
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="refresh()">
                    {{'Refresh' | localize}}
                </a>
            </ng-template>
        </nz-alert>
    </div>
    <div class="mb-md">

        <nz-table #ajaxTable nzBordered [nzData]="dataList" [nzTotal]="totalItems" [nzLoading]="isTableLoading"
            (nzPageIndexChange)="pageNumberChange()" (nzPageSizeChange)="refresh()" [nzShowSizeChanger]="true"
            [nzShowQuickJumper]="true" [nzFrontPagination]="false" [nzShowPagination]="false" [nzNoResult]="noDataTemplate">
            <ng-template #noDataTemplate>
                <no-data></no-data>
            </ng-template>
            <thead>
                <tr>
                    <th nzShowCheckbox [(nzChecked)]="allChecked" [nzDisabled]="allCheckboxDisabled" [nzIndeterminate]="checkboxIndeterminate"
                        (nzCheckedChange)="checkAll($event)">
                    </th>

                    <th>
                        {{'RoleName' | localize}}
                    </th>
                    <th class="text-center">
                        {{'CreationTime' | localize}}
                    </th>

                    <th nzWidth="230px" class="text-center">
                        {{'Actions' | localize}}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of ajaxTable.data">
                    <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshCheckStatus(dataList)"></td>

                    <td>
                        <span class="mr-sm"> {{item.displayName}}</span>
                        <nz-tag *ngIf="item.isStatic" [nzColor]="'#108ee9'" nz-tooltip [nzTitle]="l('StaticRole_Tooltip')">{{'Static' | localize}}</nz-tag>
                        <nz-tag *ngIf="item.isDefault" [nzColor]="'#2db7f5'" nz-tooltip [nzTitle]="l('DefaultRole_Description')">{{'Default' | localize}}</nz-tag>
                    </td>
                    <td class="text-center">
                        {{item.creationTime | momentFormat:'L'}}
                    </td>
                    <td class="text-center">
                        <ng-container *ngIf="isGranted('Pages.Administration.Roles.Edit')">
                            <a (click)="createOrEdit(item.id)">
                                <i nz-icon type="edit"></i>
                                {{'Edit' | localize}}
                            </a>
                        </ng-container>
                        <ng-container *ngIf="!item.isStatic&&isGranted('Pages.Administration.Roles.Delete')">
                            <nz-divider nzType="vertical"></nz-divider>
                            <nz-popconfirm [nzTitle]="'RoleDeleteWarningMessage'| localize:item.displayName" (nzOnConfirm)="delete(item)"
                                [nzOkText]="l('Ok')" [nzCancelText]="l('Cancel')">
                                <a nz-popconfirm>
                                    <i nz-icon type="delete"></i>
                                    {{'Delete' | localize}}
                                </a>
                            </nz-popconfirm>
                        </ng-container>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>
</nz-card>
